// 全屏控制组合式函数
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'

export const useFullscreen = () => {
  const router = useRouter()
  const route = useRoute()
  
  // 是否处于全屏模式
  const isFullscreen = computed(() => {
    return route.path.startsWith('/fullscreen')
  })

  // 全屏模式路由映射
  const fullscreenRouteMap = {
    '/datav/monitor': '/fullscreen/monitor',
    '/datav/user-analysis': '/fullscreen/user-analysis',
    '/datav/sales-analysis': '/fullscreen/sales-analysis',
    '/datav/operation': '/fullscreen/operation'
  }

  // 普通模式路由映射
  const normalRouteMap = {
    '/fullscreen/monitor': '/datav/monitor',
    '/fullscreen/user-analysis': '/datav/user-analysis',
    '/fullscreen/sales-analysis': '/datav/sales-analysis',
    '/fullscreen/operation': '/datav/operation'
  }

  // 进入全屏模式
  const enterFullscreen = () => {
    const currentPath = route.path
    const fullscreenPath = fullscreenRouteMap[currentPath]

    if (fullscreenPath) {
      router.push(fullscreenPath)

      // 添加全屏样式类
      document.body.classList.add('fullscreen-active')
      document.documentElement.classList.add('fullscreen-active')
      document.body.style.overflow = 'hidden'

      // 请求浏览器全屏API
      if (document.documentElement.requestFullscreen) {
        document.documentElement.requestFullscreen()
      } else if (document.documentElement.webkitRequestFullscreen) {
        document.documentElement.webkitRequestFullscreen()
      } else if (document.documentElement.msRequestFullscreen) {
        document.documentElement.msRequestFullscreen()
      }
    }
  }

  // 退出全屏模式
  const exitFullscreen = () => {
    const currentPath = route.path
    const normalPath = normalRouteMap[currentPath]

    if (normalPath) {
      router.push(normalPath)

      // 移除全屏样式类
      document.body.classList.remove('fullscreen-active')
      document.documentElement.classList.remove('fullscreen-active')
      document.body.style.overflow = ''

      // 退出浏览器全屏
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      }
    }
  }

  // 切换全屏模式
  const toggleFullscreen = () => {
    if (isFullscreen.value) {
      exitFullscreen()
    } else {
      enterFullscreen()
    }
  }

  // 监听浏览器全屏状态变化
  const handleFullscreenChange = () => {
    const isDocumentFullscreen = !!(
      document.fullscreenElement ||
      document.webkitFullscreenElement ||
      document.msFullscreenElement
    )

    // 如果浏览器退出了全屏，但路由还在全屏模式，则同步退出
    if (!isDocumentFullscreen && isFullscreen.value) {
      const currentPath = route.path
      const normalPath = normalRouteMap[currentPath]
      if (normalPath) {
        // 移除全屏样式类
        document.body.classList.remove('fullscreen-active')
        document.documentElement.classList.remove('fullscreen-active')
        document.body.style.overflow = ''
        router.push(normalPath)
      }
    }
  }

  // 添加全屏状态监听
  document.addEventListener('fullscreenchange', handleFullscreenChange)
  document.addEventListener('webkitfullscreenchange', handleFullscreenChange)
  document.addEventListener('msfullscreenchange', handleFullscreenChange)

  return {
    isFullscreen,
    enterFullscreen,
    exitFullscreen,
    toggleFullscreen
  }
}
